
<template>
  <div class="persson">
    <div>Hello: {{ name }}</div>
    <button type="button" @click="age++">点击增加年龄: {{ age }}</button>
    <div>组合: {{ person }}</div>
    <button type="button" @click="setName">点击设置姓名</button>
  </div>
</template>

<script lang="ts">
  export default {
    name: "MyTest",
  }
</script>

<script setup lang="ts" >
import {computed, ref} from "vue";
  const name = ref<string>('Rinpu');
  const age = ref<number>(18);
  const person = computed({
    get() {
      return name.value + age.value;
    },
    set(value : string) {
      name.value = value;
    }
  });
  function setName() {
    name.value = 'RRRinpu';
    console.log(person);
  }
  // 不可以修改
  const age1 = computed(() => {
    return age.value;
  })
  // function setAge() {
  //   age1.value = age.value;
  // }
</script>

<style scoped>
  .persson {
    background-color: skyblue;
    padding: 16px;
  }
</style>